<!-- 
本案例实现【组件保活】

当组件被替换时，会发生组件卸载的动作，如果组件中的一些状态被修改过，那么再次切换回当前组件时，一切的状态都会被重置为初始状态

此时，我们可以使用 keep-alive 标签将组件包裹起来，当前组件就会一直处在活动中，不会因替换而发生卸载

即使发生了替换，也不会被卸载
-->
<template>
  <!-- 增加一个 keep-alive 标签，将组件包裹起来，当前组件就会一直处在活动中，不会因替换而发生卸载 -->
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
  <button @click="toggleComponent">切换组件</button>
</template>

<script>
import ComA from "./components/ComA.vue";
import ComB from "./components/ComB.vue";

export default {
  components: {
    ComA,
    ComB
  },
  data() {
    return {
      currentComponent: "ComA",
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === "ComA" ? "ComB" : "ComA";
    }
  }
}
</script>

<style></style>